<template>
  <div class="">
    <input type="text" v-model="tj"> <button @click="add">添加</button>

    <ul class="top">
      <li
        v-for="(item, index) in list"
        :key="index"
        :class="{ acc: flag == index }"
        @click="tab(index)"
      >
        {{ item.name }}
      </li>
    </ul>

    <ul class="mod" v-for="(item,index) in show" :key="index"  v-show="flag==index">
      <li>{{item.name}}</li>
      <li class="ll" v-for="(ite,i) in $store.state.tjd" :key="i" v-show="ite.stat==item.flag">{{ite.name}} <button @click="remove(i)">删除</button></li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
     
      tj:'',
      show: [
        { name: "正在看的书籍", flag: 0 },
        { name: "正在看的电影", flag: 1 },
        { name: "正在看的游戏", flag: 2 },
        { name: "正在看的综艺", flag: 3 },
        { name: "正在看的体育", flag: 4 },
      ],
      flag: 0,
      list: [
        { name: "书籍", flag: 0 },
        { name: "电影", flag: 1 },
        { name: "游戏", flag: 2 },
        { name: "综艺", flag: 3 },
        { name: "体育", flag: 4 },
      ],
    };
  },
  mounted() {
    
  },
  methods: {
    
    tab(i) {
      this.flag = i;
    },
    remove(i){
      this.$store.commit('remove',i)
    },
    add(){
      this.$store.commit('add',{tj:this.tj,flag:this.flag})
    },
    
    
  },
  components: {},
};
</script>

<style lang='scss' scoped>
.top {
  width: 750px;
  height: 50px;
  display: flex;
  margin: auto;
  li {
    width: 150px;
    text-align: center;
    line-height: 50px;
    background-color: greenyellow;
  }
  .acc {
    background-color: blue;
    color: white;
  }
}
.mod{
  width: 800px;
  height: 300px;
  border: 1px solid #ccc;
  margin: auto;
  button{
    display: none;
  }
  .ll:hover{
    background-color: blue ;
    button{
      display: inline-block;
    }
  }
}
</style>
